<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <f:event type="preRenderView" listener="#{makerControllerBean.getItems}"></f:event>
    <h:head>
        <title>JSF 2: Blank Starting-Point Project</title>
        <link href="../css/common.css" rel="stylesheet"
              type="text/css"></link>
        <link href="../css/input.css" rel="stylesheet"
              type="text/css"></link>
        <link href="../css/edit.css" rel="stylesheet"
              type="text/css"></link>
        <link href="../css/list.css" rel="stylesheet"
              type="text/css"></link>
        <meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
    </h:head>
    <h:body>
        <ui:composition template="/WEB-INF/templates/horizontal_menu.xhtml">
            <ui:param name="activeIndex" value="3" />
        </ui:composition>
        <div class ="error">
            <p:messages /> 
        </div>
        <h:form id="main">
            <div id="main-area">
                <div id="main-title">
                    商品管理
                    <f:verbatim>
                        <hr style="background-color: blue"></hr>
                    </f:verbatim>
                </div>
                <div id="main-contents">
                    <div id="new-item-area">
                        <p:commandButton action="#{productControllerBean.goToAddPage}"
                                         value="新規商品作成"></p:commandButton>
                    </div>
                    <div id="search-form-area">
                        <p:panel id="search_value">
                            <div>
                                <h:outputText value="商品名"></h:outputText>
                                <h:inputText value="#{productViewBean.nameSearch}" autocomplete="off"></h:inputText>
                            </div>
                            <div>
                                <h:outputLabel for="makerId" value="メーカー">
                                </h:outputLabel>
                            </div>
                            <div>
                                <p:selectOneMenu id="makerId"
                                                 value="#{productViewBean.makerIdSearch}">
                                    <f:selectItem itemLabel="メーカー名を選択しなさい" itemValue="0" />
                                    <f:selectItems value="#{makerViewBean.makerList}" var="maker"
                                                   itemLabel="#{maker.name}" itemValue="#{maker.id}" />
                                </p:selectOneMenu>
                            </div>
                        </p:panel>
                        <div>
                            <h:commandButton value="リセット" action="#{productControllerBean.reset}">        
                               <p:ajax update="search_value" resetValues="true" />
                            </h:commandButton>
                            <p:commandButton value="絞り込み"
                                             action="#{productControllerBean.find}" ></p:commandButton>
                        </div>
                    </div>
                    <div id="list01">
                        <p:spacer height="30px"></p:spacer>
                        <p:dataTable var="product" id="data"
                                     value="#{productViewBean.productList}" paginator="true"
                                     rows="30"
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                     rowsPerPageTemplate="30,60,90">
                            <p:column headerText="ID" sortBy="#{product.id}">
                                <h:outputText value="#{product.id}"></h:outputText>
                            </p:column>
                            <p:column headerText="商品名" sortBy="#{product.name}">
                                <h:outputText value="#{product.name}"></h:outputText>
                            </p:column>
                            <p:column headerText="メーカー" sortBy="#{product.maker.name}">
                                <h:outputText value="#{product.maker.name}"></h:outputText>
                            </p:column>
                            <p:column headerText="表示順序" sortBy="#{product.orderId}">
                                <h:outputText value="#{product.orderId}"></h:outputText>
                            </p:column>
                            <p:column headerText="表示/非表示" sortBy="#{product.deleteFlg}">
                                <h:outputText value="#{productControllerBean.deleteFlgList[product.deleteFlg]}"></h:outputText>
                            </p:column>
                            <p:column headerText="編集">
                                <p:commandButton value="編集"
                                                 action="#{productControllerBean.goToEditPage}">
                                    <f:setPropertyActionListener
                                        target="#{productViewBean.selectedProduct}"
                                        value="#{product}" />
                                </p:commandButton>
                            </p:column>
                            <p:column headerText="削除">
                                <p:commandButton value="削除" update=":main:delete"
                                                 oncomplete="dialog.show()" title="削除">
                                    <f:setPropertyActionListener
                                        target="#{productViewBean.selectedProduct}"
                                        value="#{product}"></f:setPropertyActionListener>
                                </p:commandButton>
                            </p:column>
                        </p:dataTable>
                        <p:dialog header="削除" widgetVar="dialog" resizable="false"
                                  showEffect="fade" hideEffect="explode" modal="true">
                            <h:panelGrid id="delete"
                                         style="width:400px; border: white">
                                <p:row>
                                    <p:column style="border:0px;">
                                        <h:outputText value="削除したデータは元に戻せません。"></h:outputText>
                                    </p:column>
                                </p:row>
                                <p:row>
                                    <p:column style="border:0px white;">
                                        <h:outputText
                                            value="本当に#{productViewBean.selectedProduct.name }削除しますか。"></h:outputText>
                                    </p:column>
                                </p:row>
                                <p:row>
                                    <p:column>
                                        <p:commandButton id="submit" value="OK"
                                                         style="width:130px"
                                                         action="#{productControllerBean.delete}" update="main"
                                                         oncomplete="dialog.hide()">
                                            <f:setPropertyActionListener
                                                target="#{productViewBean.flag}" value="1" />
                                        </p:commandButton>
                                    </p:column>
                                    <p:column>
                                        <p:commandButton value="キャンセル" oncomplete="dialog.hide()"
                                                         style="width:130px">
                                        </p:commandButton>
                                    </p:column>
                                </p:row>
                            </h:panelGrid>
                        </p:dialog>
                    </div>
                    <div align="right"><a href="#">▲このページのTOPへ</a></div>
                </div>
            </div>
        </h:form>
    </h:body>
</html>